<template>
  <div :class="['chat-user-item', currentChatUser || data.topType == 1 ? 'active' : '']">
    <Badge :count="data.noReadCount" :top="1" :left="2" />
    <Image :src="data.contactIcon" />
    <div class="user-info">
      <div class="username-panel">
        <div class="groupName" v-if="data.contactType == 1">群</div>
        <div :class="['username', data.contactType == 1 ? 'red' : 'username']">
          {{ data.contactName }}
        </div>
        <div class="message-time">
          {{ proxy.Date.toTimeText(data.lastReceiveTime, true) }}
        </div>
      </div>
      <div class="last-message" v-if="data.contactType === 0" v-html="data.lastMessage" />
      {{ data.messageType }}
      <div class="last-message" v-if="data.contactType === 1" v-html="lastName" />
    </div>
    <div class="chat-top iconfont icon-zhiding" v-if="data.topType == 1"></div>
  </div>
</template>

<script setup>
import { getCurrentInstance, computed } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
  currentChatUser: {
    type: Boolean,
    default: false,
  },
});

const lastName = computed(() => {
  if (proxy.Utils.isEmpty(props.data.lastSendName)) {
    return props.data.lastMessage;
  } else {
    return props.data.lastSendName + ":" + " " + props.data.lastMessage;
  }
});
</script>

<style lang="scss" scoped>
.chat-user-item {
  padding: 10px;
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;

  &:hover {
    cursor: pointer;
    background: #c9c8c6;

    .message-time {
      color: #9a9898 !important;
    }
  }

  .user-info {
    flex: 1;
    margin-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .username-panel {
      display: flex;
      .groupName {
        color: #ddd;
        font-size: 13px;
        font-weight: 600;
        margin-right: 2px;
        background-color: #409eff;
        border-radius: 2px;
      }
      .username {
        width: 130px;
        color: #000000;
        font-size: 13px;
        font-weight: 600;
        overflow: hidden; /* 隐藏超出div宽度的文本 */
        text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
        white-space: nowrap; /* 确保文本在一行内显示 */
      }
      .red {
        width: 130px;
        color: red;
        font-size: 13px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .message-time {
        width: 55px;
        color: #b6b6b6;
        font-size: 12px;
        text-align: right;
      }
    }

    .last-message {
      width: 180px;
      height: 17px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      color: #999999;
      margin-top: 5px;
    }
  }

  //置顶
  .chat-top {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 12px;
    color: #8f8f8f;
  }
}

.active {
  cursor: pointer;
  background: #c9c8c6;

  .message-time {
    color: #999999 !important;
  }

  &:hover {
    background: #c9c8c6;

    .message-time {
      color: #999999 !important;
    }
  }
}
</style>
